<template>
  <a-form-model-item>
    <!-- {{ options }} -->
    <div v-if="!options.hidden" :span="span" :style="options" @click="helpClick">
      <a-icon v-if="options.icon" class="iconBox" :type="options.icon" />
      <label
        :class="{ 'ant-form-item-required': options.showRequiredMark }"
        :style="{
          fontFamily: options.fontFamily,
          fontSize: Number(options.fontSize.substring(0, options.fontSize.indexOf('pt'))) / 10.5 + 'rem',
          lineHeight: options.fontSize && options.fontSize.substring(0, options.fontSize.length - 2) * 1.6 + 'pt',
          color: options.color,
        }"
      >
        <div style="display: table-cell" v-if="options.icon">
          <div style="display: inline-block">
            <a-icon
              :type="options.icon"
              :style="{
                fontSize: options.fontSize,
                color: options.color,
              }"
            />
          </div>
        </div>
        <span v-html="label"></span>
        <a-tooltip placement="top" v-if="options.info">
          <template slot="title">
            <span v-text="options.info"></span>
          </template>
          <a-button type="link" icon="question-circle" style="width: auto" />
        </a-tooltip>
      </label>
    </div>
  </a-form-model-item>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: 'title',
    },
    span: {
      type: Number,
      default: 24,
    },
    // 配置参数
    options: {
      type: Object,
    },
  },
  methods: {
    helpClick() {
      if (this.options.click) {
        this.$emit('fHelp', this.options.click, this.index)
      }
    },
  },
}
</script>

<style lang="less" scope>
.iconBox {
  margin-right: 10px;
}
</style>